<template>
    <div class="upload-container">
        <button title="犹豫啥，赶紧点啊！" @click="handleClick">
            {{ btnName }}
        </button>
        <input
            :multiple="isMultiple"
            :webkitdirectory="isSupportDir"
            v-show="false"
            ref="ipt"
            @input="handleUpload"
            type="file"
        />
    </div>
</template>
<script>
export default {
    name: "upload",
    props: {
        btnName: {
            type: String,
            default: "文件上传",
        },
        isSupportDir: {
            type: Boolean,
            default: false,
        },
        isMultiple: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    created() {},
    mouted() {},
    computed: {},
    watch: {},
    methods: {
        handleClick() {
            //防止相同文件无法再次上传
            this.$refs.ipt.value = null;
            this.$refs.ipt.click();
        },
        handleUpload({ target }) {
            let fileList = target.files;
            this.$emit("receiveFileList", fileList);
        },
    },
};
</script>
<style lang="less" scoped>
.upload-container {
    display: inline-block;
    button {
        min-width: 100px;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
        background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        border: none;
        color: #fff;
        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
